27. Extra Credit: Add a Header to the GridLayout

This EXTRA CREDIT exercise builds off the prior exercise.

In this exercise you'll need only a few simple steps to configure your GridLayoutManager to display the header in a row by itself.

1. Create a SpanSizeLookup.

   Open SleepTrackerFragment and configure a new SpanSizeLookup object:

gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
}

1. Use Alt-Enter to override the method getSpanSize.

   The intention menu can help you override missing methods without a lot of typing.

2. Return the correct span size for each position.

   Position 0 should have a span size of 3. The others should have a span size of 1.

   manager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
       override fun getSpanSize(position: Int) =  when (position) {
           0 -> 3
           else -> 1
       }
   }

   
   

3. Run the app again and check out your 3-column header!

If you want to start at this step, you can download this exercise from: Step.14-Exercise-Add-Header-to-GridLayout.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here: Step.14-Solution-Add-Header-to-GridLayout, or using this git diff.